<template>
  <kk-pair class="HW" top>
    <!-- 顶部导航条 -->
    <div class="TopBox" slot="auto">
      <kk-text class="Title ND">KK-Component</kk-text>
    </div>

    <kk-pair class="HW" slot="max" left>
      <!-- 左侧导航条 -->
      <div class="Index" slot="auto">
        <div class="In" v-for="(item,index) in Index" :key="index" @click="GoPage(item)">
          <kk-text class="Front NP" :val="item.title" :class="{Hover:Now==item.name}" />
        </div>
      </div>
      <!-- 右侧页面 -->
      <div class="PageBox HW" slot="max">
        <kk-router />
      </div>
    </kk-pair>
  </kk-pair>
</template>

<script>
export default {
  // 页面对象
  data: () => ({
    Index: null, // 目录
    Now: null // 当前目录
  }),

  // 生命周期函数：挂载前调用
  created() {
    const A = this.$router.options.routes; // 获取整个路由
    this.Index = A.find(Res => Res.name == "Home").children; // 提取子路由
    if (this.$route.name == "Home" || !window.sessionStorage.getItem("Page")) {
      this.GoPage(this.Index[0]); // 没有进入子页面则自动进入
    } else this.Now = window.sessionStorage.getItem("Page");
  },

  // 页面方法
  methods: {
    GoPage(item) {
      if (item.name != this.$route.name) {
        this.$router.push({ name: item.name }); // 载入后自动跳转页面
        this.Now = item.name;
        window.sessionStorage.setItem("Page", item.name);
      }
    }
  }
};
</script>

<style scoped>
.TopBox {
  /* 顶部容器 */
  border-bottom: 0.05vw solid rgb(220, 223, 230);
  height: 3.5vw;
}

.Title {
  /* 标题 */
  fill: rgb(64, 158, 255);
  margin-top: 1vw;
  font-size: 0vw;
  height: 1.5vw;
}

.Index {
  /* 导航栏 */
  padding: 2.5vw 3vw 2.5vw 1vw;
}

.Index .In {
  /* 导航元素 */
  margin-bottom: 1vw;
}

.Index .Front {
  /* 导航文字 */
  fill: rgb(48, 49, 51);
  height: 0.8vw;
}

.Index .Front:hover,
.Index .Hover {
  fill: rgb(64, 158, 255);
}

.PageBox {
  /* 子页面容器 */
  padding: 0 1vw;
}
</style>

<style>
.Page {
  /* 页面 */
  padding: 2.5vw 0vw;
  font-size: 0vw;
}

.Page .T1 {
  /* 子页面标题 */
  fill: rgb(48, 49, 51);
  height: 1.45vw;
}

.Page .T2 {
  /* 说明文字 */
  fill: rgb(144, 147, 153);
  height: 0.7vw;
}

.Page .F1 {
  /* 填充宽度 */
  height: 2.5vw;
  width: 100%;
}

.Page .F2 {
  /* 填充宽度 */
  height: 0.7vw;
  width: 100%;
}
</style>

<style>
.Shows {
  /* 展示容器 */
  border: 0.05vw solid rgb(220, 223, 230);
  border-radius: 0.2vw;
  overflow: hidden;
  font-size: 0vw;
}

.Shows .Polk {
  /* 展示容器 */
  border-bottom: 0.05vw solid rgb(220, 223, 230);
  padding: 1vw 1.25vw;
}

.Codea {
  /* 代码容器 */
  background-color: rgb(250, 250, 250);
  padding: 1vw 1.25vw;
  font-size: 0vw;
}

.Codea .Purple {
  fill: rgb(197, 134, 192);
  height: 0.7vw;
}

.Codea .Orange {
  fill: rgb(206, 145, 120);
  height: 0.7vw;
}

.Codea .Blue {
  fill: rgb(123, 204, 255);
  height: 0.7vw;
}
.Codea .Blues {
  fill: rgb(65, 105, 225);
  height: 0.7vw;
}

.Codea .Green {
  fill: rgb(78, 201, 176);
  height: 0.7vw;
}

.Codea .Greens {
  fill: rgb(103, 172, 94);
  height: 0.7vw;
}

.Codea .Black {
  fill: rgb(170, 170, 170);
  height: 0.7vw;
}

.Codea .Yellor {
  fill: rgb(200, 200, 0);
  height: 0.7vw;
}

.Codea .Space {
  /* 空格 */
  margin-left: 0.3vw;
}

.Codea .SpaceBox {
  /* 空格 */
  display: inline-block;
  height: 0.7vw;
  width: 0.9vw;
}
</style>
